{/* <template>
            <div class="xinwen-com-box">
                <el-dialog :append-to-body="true" title="文章列表" width="900px" :visible.sync="imgShow" @close="closeDiao" :close-on-click-modal="false">
                    <div class="img-com-content">
                            <div class="leftList-box" id="img-com-content-left">
                                <div class="title">
                                        <span>文章分类</span>
                                        <i class="icon el-icon-plus" style="float:right;cursor:pointer;" @click="addLeft"></i>
                                </div>
                                
                                <div class="leftLists-content">
                                    <div v-for="(item,i) in leftLists" :key="i" :class="item.id==activeId ? 'serverLists active':'serverLists' " @click="leftItemCli(item.id)" @mouseenter="leftItemOver(item.id)" @mouseleave="leftItemOut(item.id)">
                                            <div class="name" v-if="activeEditId != item.id">{{item.minName}}</div>
                                                    <div  @click.stop="editInput"><el-input v-model="item.name" v-if="activeEditId == item.id" class="input-name" size="small" placeholder="请输入内容"></el-input></div>
                                                    <!-- <div style="margin-left: 10px;display:inline-block;">( {{item.zhekou}} 折 )</div> -->
                                                    <!-- 鼠标放上去 -->
                                                    <div class="option" v-if="activeOverId == item.id">
                                                            <i
                                                                size="mini"
                                                                class="el-icon-edit"
                                                                style="border: 0;padding: 6px;cursor:pointer;"
                                                                @click.stop="leftEditCli(item)"
                                                            >
                                                            </i>
                                                                
                                                            <i
                                                                size="mini"
                                                                class="el-icon-delete"
                                                                style="border: 0;padding: 6px;cursor:pointer;"
                                                                @click.stop="DelServer(item)"
                                                            >
                                                            </i>

                                                            <i
                                                                size="mini"
                                                                class="el-icon-s-tools"
                                                                style="border: 0;padding: 6px;cursor:pointer;"
                                                                @click.stop="setServer(item)">
                                                            </i>
                                                    </div>
                                                    <!--点击编辑图标进入编辑状态 -->
                                                    <div class="option" v-if="activeEditId == item.id">
                                                            <i
                                                                size="mini"
                                                                class="el-icon-close"
                                                                style="border: 0;padding: 6px;cursor:pointer;"
                                                                @click.stop="cancelEdit(item)">
                                                            </i>
                                                                
                                                            <i
                                                                size="mini"
                                                                class="el-icon-check"
                                                                style="border: 0;padding: 6px;cursor:pointer;"
                                                                @click.stop="confirmEdit(item)" >
                                                            </i >
                                                    </div >
                                            </div >
                                    </div >
                            </div >
                            
                            <div class="rightList-box" id="rightList-box-content">
                                    <el-card class="box-card add-box-card" style="border-bottom: 0!important;">
                                                <el-button size="small" class="localUpload" type="primary" @click="addWenZhang">添加文章</el-button>
                                    </el-card>

                                    <div class="img-box">
                                            <el-table
                                                ref="wenzhangTable"
                                                :data="rightLists"
                                                border
                                                style="width: 100%"
                                            >     
                                                                                                            
                                                        <el-table-column
                                                            prop="headerPic"
                                                            label="导图"
                                                            align="center"
                                                            header-align="center"
                                                            width="110px"
                                                        >
                                                                            <template slot-scope="scope">
                                                                                        <img v-if="scope.row.headerPic" :src="scope.row.headerPic" style="width: 100px;height: 100px;" class="img" alt="">
                                                                                        <div v-else style="width: 100px;height: 100px;"></div>
                                                                            </template>
                                                        </el-table-column>

                                                        <el-table-column
                                                            prop="title"
                                                            label="标题"
                                                            align="center"
                                                            header-align="center"
                                                        >
                                                        </el-table-column>

                                                        <el-table-column
                                                            label="操作"
                                                            align="center"
                                                            header-align="center"
                                                            width="200px"
                                                        >             
                                                                        
                                                                            <template slot-scope="scope">
                                                                                        <i
                                                                                            size="mini"
                                                                                            class="el-icon-edit"
                                                                                            style="border: 0;padding: 6px 10px;cursor:pointer;"
                                                                                            @click.stop="editWenZhang(scope.row)"></i>
                                                                                        <i
                                                                                            size="mini"
                                                                                            class="el-icon-delete"
                                                                                            style="border: 0;padding: 6px 10px;cursor:pointer;"
                                                                                            @click.stop="delWenZhang(scope.row.id)"></i>
                                                                            </template>
                                                                        
                                                        </el - table - column >
                                            </el - table >
                                    </div >

    <div style="text-align: right;margin-top: 20px;">
        <el-pagination
            background
                                                @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handlePrev"
        @next-click="handleNext"
        :current-page="pageNo"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
                                                :total="total">
    </el-pagination>
                                    </div >    
                            </div >
                    </div >

                    <div style="text-align: right;" class="margin-top-20 bottom-box">
                            <el-button class="cancel" type="danger" @click="closeDiao">取消</el-button>
                            <el-button class="confirm" type="primary" @click="confirmFtn" > 确认</el - button >
                    </div >
                    
                    < !--添加编辑左边数据 -->
                    <el-dialog :append-to-body="true" :title="leftStatus == 'add' ? '添加文章类型':'编辑文章类型'" :visible.sync="showLeftModal">
                                <el-form :model="leftModal" ref="leftModal" :rules="rules" label-width="100px" class="demo-ruleForm">
                                            <el-form-item label="文章类型:" prop="name">
                                                            <el-input
                                                                type="text"
                                                                placeholder="请输入内容"
                                                                v-model="leftModal.name"
                                                                maxlength="30"
                                                                show-word-limit
                                                            >
                                                            </el-input>
                                            </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="showLeftModal = false">取 消</el-button>
                                    <el-button type="primary" @click="leftConfirm" > 确 定</el - button >
                                </div >
                    </el - dialog >

                    < !--添加文章 -->
                    <el-dialog :append-to-body="true" width="1200px" :title="wenzhangStatus == 'add' ? '添加文章':'编辑文章'" :visible.sync="showWenZhang" :close-on-click-modal="false">
                                <el-form :model="wenzhangModal" ref="wenzhangModal" :rules="rulesWenZhang" label-width="100px" class="demo-ruleForm">
                                            <el-form-item label="文章标题:" prop="title">
                                                            <el-input
                                                                type="text"
                                                                placeholder="请输入内容"
                                                                v-model="wenzhangModal.title"
                                                                maxlength="30"
                                                                show-word-limit
                                                            >
                                                            </el-input>
                                            </el-form-item>

                                            <el-form-item label="文章导图:" prop="headerPic" style="height:auto;">
                                                
                                                            <el-upload
                                                                action=""
                                                                :http-request="upload"
                                                                :on-preview="handlePicture"
                                                                :on-remove="removePicture"
                                                                :data="qiniu.uploadData"
                                                                :file-list="wenzhangModal.headerPic"
                                                                accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG,.GIF"
                                                                :multiple="true"
                                                                ref="imgComRef"
                                                                list-type="picture-card"
                                                                :limit="1"
                                                                :on-exceed="limitFun"
                                                            >
                                                                        <i class="el-icon-plus"></i>
                                                            </el-upload>

                                            </el-form-item>

                                            <el-form-item label="文章内容:" prop="content" style="height:auto;">
                                                
                                                            <quill-editor ref="text" v-model="wenzhangModal.content" class="myQuillEditor" :options="editorOption" />

                                            </el-form-item>

                                            <el-form-item label="文章标签:" id="biaoqian" prop="content" style="height:auto;">
                                                
                                                            <el-select
                                                                v-model="wenzhangModal.biaoqian"
                                                                multiple
                                                                filterable
                                                                allow-create
                                                                default-first-option
                                                                placeholder="请选择文章标签"
                                                                style="width: 450px;"
                                                            >
                                                                        <el-option
                                                                            v-for="item in wenzhangOptions"
                                                                            :key="item.value"
                                                                            :label="item.label"
                                                                            :value="item.value">
                                                                        </el-option>
                                                            </el-select>

                                                            <div class="biaoqian-text">( 可输入创建 )</div>
                                            </el - form - item >

                                </el - form >
                                <div slot="footer" class="dialog-footer">
                                        <el-button @click="showWenZhang = false">取 消</el-button>
                                        <el-button type="primary" @click="wenzhangConfirm" > 确 定</el - button >
                                </div >
                    </el - dialog >
                    
                    < !--浏览图片 -->
    <el-dialog : append-to-body="true" : visible.sync="qiniu.showImages">
        <img width="100%" :src="qiniu.imageUrl" alt="">
    </el-dialog>
            </div >
</template >
<script>
import axios from "axios"
import { mapState } from 'vuex'
import Uploader from 'qiniu-web-uploader'
import randomToken from 'random-token'
import { quillEditor } from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{'direction': 'rtl'}], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ['clean'], // 清除文本格式-----['clean']
  ['image'] // 链接、图片、视频-----['link', 'image', 'video']
];

export default {
    components: {
        quillEditor
    },
    props: {
        imgShow: Boolean,
        imgData: Object
    },
    data(){
        let _this = this;
        //验证文章导图
        var validateHeader = (rule, value, callback) => {
            value = _this.wenzhangModal.headerPic;

            if(!value.length){
                callback(new Error('请输上传文章导图!'));
            }else{
                callback();
            }
        };

        //验证文章内容
        var validateContent = (rule, value, callback) => {
            value = _this.wenzhangModal.content;

            if(value == ""){
                callback(new Error('请输入文章内容!'));
            }else{
                callback();
            }
        };


        return{
            qiniu:{
                qiniuToken: "",
                uploadData:{

                },
                imageUrl:"",
                showImages:false
            },
            imgDisabled: false,
            activeEditId:"", //点击编辑按钮
            activeOverId:"", //鼠标放上去显示编辑删除按钮
            activeId:"", //选中
            leftLists:[], //服务信息列表
            showLeftModal:false, //显示服务信息模态框
            leftStatus:"", //编辑或添加服务信息
            leftModal:{  //服务信息模态框数据
                name:""
            }, 
            rightLists:[], //服务项目列表
            showRightModal:false, //显示服务项目模态框
            rightModal:{}, //服务项目模态框数据
            rightStatus:"", //编辑或添加服务信息
            gongxuLists:[], //工序列表
            rules: {
                name:[
                    { required: true, message: '请填写名称!', trigger: 'blur' }
                ],
                // zhekou:[
                //     {validator: validateZhekou, trigger: 'blur' }
                // ]
            },
        rulesWenZhang: {
            title:[
        {required: true, message: '请填写文章标题!', trigger: 'blur' }
        ],
                // headerPic:[
                //     {validator: validateHeader, trigger: 'blur' }
        // ],
        content:[
        {validator: validateContent, trigger: 'blur' }
        ]
            },
        pageNo:1,
        pageSize:5,
        total: 10,
        checkIcon: require("./../static/images/check-icon.png"),
        images: [],
        showWenZhang: false,
        wenzhangStatus: "add",
        wenzhangModal: {
            title: "",
        headerPic: [],
        content: "",
        biaoqian: []
            },
        editorOption: {
            placeholder: '请输入文本...',
        theme: 'snow',
        modules: {
            toolbar: {
            container: toolbarOptions
                    }
                }
            },
        wenzhangOptions: [
        {
            value: '男性脱发',
        label: '男性脱发'
                },
        {
            value: '女性脱发',
        label: '女性脱发'
                },
        {
            value: '雄激素性脱发',
        label: '雄激素性脱发'
                },
        {
            value: '斑秃',
        label: '斑秃'
                },
        {
            value: '瘢痕性脱发',
        label: '瘢痕性脱发'
                },
        {
            value: '神经性脱发',
        label: '神经性脱发'
                },
        {
            value: '营养性脱发',
        label: '营养性脱发'
                },
        {
            value: '内分泌脱发',
        label: '内分泌脱发'
                },
        {
            value: '化学物理脱发',
        label: '化学物理脱发'
                },
        {
            value: '季节性脱发',
        label: '季节性脱发'
                },
        {
            value: '其他',
        label: '其他'
                }
        ],
        userInfo: ""
        }
    },
        computed: {
            ...mapState([
                'user',
                'Qiniu',
                'popoverData'
            ])
        },
        methods:{
            //编辑框获取焦点
            editInput(){
            let stopClick = "";
        },
        //确定编辑
        async confirmEdit(item){
            let that = this;
        let data = {
            name:item.name,
        id:item.id
            }

        let res = await that.$request({
            url: "/wenZhangType/editWenZhangType",
        method: 'post',
        data
                });

        if(res.code == 200){

            this.$message({
                message: "修改成功!",
                type: 'success'
            });

        this.getLeftLists();
        this.activeEditId = "";
            }
        },
        //取消编辑
        cancelEdit(){
            this.activeEditId = "";
        },
        //编辑左边数据按钮
        leftEditCli(item){
            this.activeEditId = item.id;
        this.activeOverId = "";
        this.leftStatus = "edit";
        },
        //鼠标over事件
        leftItemOver(id){
            let activeEditId = this.activeEditId;
        if(activeEditId != id){
            this.activeOverId = id;
            }
        },
        //鼠标out事件
        leftItemOut(){
            this.activeOverId = "";
            // this.activeEditId = "";
        },
        //点击左边列表
        leftItemCli(id){
            this.activeId = id;
        this.activeEditId = "";
        this.pageNo = 1;
        this.getRightLists();
        },
        //重新获取列表
        async getLeftLists(activeId){
            let that = this;

        let {data} = await this.$store.dispatch("getInfo");

        if(data && data.name){
            //vip列表
            let res = await that.$request({
            url: "/wenZhangType/getWenZhangType",
        method: 'get',
        params:{ }
                    });
        res = res.data;

                this.leftLists = res.map((v,i,arr)=>{
                    return{
            ...v,
            minName: v.name.length > 7 ? v.name.slice(0,7) + "..." : v.name
                    }
                });

        if(activeId){
            this.activeId = activeId;
                }else{
            this.activeId = res[0] ? res[0].id : 0;
                }

        this.getRightLists();

            }
            
        },
        //添加左边模态框
        addLeft(){
            this.leftModal = {
                name: ""
            };
        this.showLeftModal = true;
        this.leftStatus = "add";
        },
        //编辑左边模态框
        editLeft(i,row){
            this.leftModal = JSON.parse(JSON.stringify(row));
        this.showLeftModal = true;
        this.leftStatus = "edit";
        },
        //确定添加或编辑左边数据
        async leftConfirm(){
            let that = this;
        let leftStatus = this.leftStatus;
        let leftModal = this.leftModal;

        let data = {
            name:leftModal.name,
            }

        this.$refs["leftModal"].validate(async function(valid){
                if(valid){
            let url = "";
        if( leftStatus == 'add' ){
            url = 'wenZhangType/addWenZhangType';
                    }else if( leftStatus == 'edit'){
            data.id = leftModal.id;
        url = 'wenZhangType/editWenZhangType';
                    }

        let res = await that.$request({
            url,
            method: 'post',
        data
                    });

        if(res.code == 200){

            let message = (leftStatus == "add" ? "添加成功!" : "修改成功!");

        that.$message({
            message: message,
        type: 'success'
                        });

        that.showLeftModal = false;
        that.activeEditId = "";
        that.getLeftLists();
                    }
                }
            })
        },
        //删除左边数据
        async DelServer(item){
            let that = this;

        this.$confirm('确认删除?', '提示', {
            confirmButtonText: '确定',
        cancelButtonText: '取消',
                    callback: async action => {
                        if (action === 'confirm') {
            let res = await that.$request({
            url: "/wenZhangType/delWenZhangType",
        method: 'get',
        params:{
            id: item.id
                                }
                            });

        if(res.code == 200){

            that.$message({
                message: '删除成功!',
                type: 'success'
            });

        that.getLeftLists();
                            }
                        }
                    }
            });
        },
        //设置客户价格列表
        setServer(item){
            let {selectShopid} = this.search;
        this.customerServiceShow = true;
        this.customerServiceData = {
            kehuid: item.id,
        shop_id: selectShopid,
        name: item.name
            }
        },
        //获取右边列表
        async getRightLists(){
            let that = this;
        let {pageNo, pageSize} = this;
        let activeId = this.activeId;

        let {data} = await this.$store.dispatch("getInfo");

        if(data && data.name){
            let res = await that.$request({
            url: "/wenzhang/getWenZhang",
        method: 'get',
        params:{
            typeId: activeId,
        pageNo,
        pageSize
                        }
                    });

                    res.data[0].forEach((v,i,arr)=>{
            v.selected = false;
                    });

        this.rightLists = res.data[0];
        this.total = res.data[1];
            }
        },
        //删除文章
        async delWenZhang(id){
            let that = this;

        this.$confirm('确认删除?', '提示', {
            confirmButtonText: '确定',
        cancelButtonText: '取消',
                callback: async action => {
                    if (action === 'confirm') {

            //获取七牛token
            let res = await that.$request({
            url: '/wenzhang/delWenZhang',
        method: 'get',
        params: {
            id
        }
                        });

        if(res.code == 200){

            that.$message({
                message: '删除成功!',
                type: 'success'
            });

        that.getRightLists();
                        }
                    }
                }
            });
            
        },
        //编辑文章
        editWenZhang(row){
            this.showWenZhang = true;
        this.wenzhangStatus = "edit";

        this.wenzhangModal = {
            id: row.id,
        title: row.title,
        biaoqian: row.biaoqian ? row.biaoqian.split(",") : [],
        headerPic: [
        {
            name: row.headerPic,
        url: row.headerPic
                    }
        ],
        content: row.content
            }
        },
        //pageSize改变
        handleSizeChange(val){
            this.pageSize = val;
        this.getRightLists();
        },
        //pageNo改变
        handleCurrentChange(val){
            this.pageNo = val;
        this.getRightLists();
        },
        //上一页
        handlePrev(val){
            this.pageNo = val;
        this.getRightLists();
        },
        //下一页
        handleNext(val){
            this.pageNo = val;
        this.getRightLists();
        },
        //关闭弹窗
        closeDiao(){
            this.$store.dispatch("setXinWen", {
                show: false,
                checkType: 'radio',
                data: {},
                callback: function () {

                }
            });
        },
        //确认弹框
        confirmFtn(){
            this.$store.dispatch("setXinWen", {
                show: false,
                checkType: 'radio',
                data: {},
                callback: function () {

                }
            });

            // this.popoverData.callback();
            
        },
        //预览头像大图
        handlePicture(file) {
            this.qiniu.imageUrl = file.url;
        this.qiniu.showImages = true;
        },
        //删除详情图片
        removePicture(file, fileList){
            let url = file.url;//控件的本地文件
        let that = this;
        let copyFiles = JSON.parse(JSON.stringify(this.wenzhangModal.headerPic));
            copyFiles.forEach( async (v,i,arr) => {
                if(v.url == url){

            copyFiles.splice(i, 1);
        that.wenzhangModal.headerPic = copyFiles;
                    
                }
            });
        },
        //上传
        async upload(params) {

            let that = this;
        //限制图片大小
        let size = params.file.size / 1024 / 1024 < 20;

        if (!size) {
            this.$message.error('上传图片的大小不能超过 20M!');
        return false;
                }

        //上传提示
        that.$store.dispatch("setLoading",{
            show: true,
        text: "上传中请稍后..."
                });

        let thisRef = 'imgComRef';
        let uploadFile = "";
        uploadFile = this.$refs[thisRef].uploadFiles;

        this.$refs[thisRef].clearFiles();

        //上传控件的最后一个文件信息
        let len = uploadFile.length;
        let file = uploadFile[len-1].raw;
        let uid = uploadFile[len-1].uid;
        let name = uploadFile[len-1].name;

        await this.uploadMultiple(file,name);
            
        },
        //上传多个
        async uploadMultiple(file,name){
            let that = this;
            return new Promise((resolve,reject)=>{
            //token生成唯一图片key
            let key = randomToken(32);
        key = `officewebback/${key}`;
        //七牛token
        let token = this.qiniu.qiniuToken;

        //七牛上传方法
        let uploader = new Uploader(file, {
            uptoken: token, //七牛上传凭证
        key: new Buffer(key).toString('base64')
                });

                //上传完成获取key
                uploader.on('complete', async () => {
            let headerPic = that.wenzhangModal.headerPic;
        //图片url赋值fileList
        headerPic.push({
            url:that.Qiniu + uploader.imgRes.key,
        name:name
                    });

        that.wenzhangModal.headerPic = headerPic;

        //上传提示
        that.$store.dispatch("setLoading",{
            show: false,
        text: "上传中请稍后..."
                    });

        that.getLeftLists();

        resolve();

                });

        uploader.upload(); //调用上传方法
            });
        },
        async getQiniuToken(){
            //获取七牛token
            let qiniuToken = await this.$request({
            url: '/qiniu/getToken',
        method: 'get',
        params: {

        }
            });

        this.qiniu.qiniuToken = qiniuToken.token;
        },
        //选择图片
        selectImg(id){
            let rightLists = this.rightLists;
            rightLists.forEach((v,i,arr)=>{
                if(v.id == id){
            v.selected = true;
                }else{
            v.selected = false;
                }
            });

        this.rightLists = rightLists;
        },
        addWenZhang(){
            if(!this.leftLists.length){
            this.$message.error("请先添加文章分类!");
        return false;
            }

        this.showWenZhang = true;
        this.wenzhangStatus = "add";
        this.wenzhangModal = {
            title: "",
        headerPic: [],
        content: "",
        biaoqian: []
            }
        },
        limitFun(){
            this.$message.error("最多上传1张!");
        },
        wenzhangConfirm(){
            let status = this.wenzhangStatus;
        let that = this;
        let wenzhangModal = this.wenzhangModal;
        let data = {
            title: wenzhangModal.title,
                headerPic: wenzhangModal.headerPic.map(v=>v.url).join(","),
        content: wenzhangModal.content,
        typeId: that.activeId,
        biaoqian: wenzhangModal.biaoqian.join(",")
            };

        this.$refs["wenzhangModal"].validate(async function(valid){
                if(valid){
            let url = "";
        if(status == "add"){
            url = "wenzhang/addWenZhang";
                    }else{
            data.id = wenzhangModal.id;
        url = "wenzhang/editWenZhang";
                    }

        let res = await that.$request({
            url,
            method: 'post',
        data
                    });

        if(res.code == 200){

            that.$message({
                message: status == "add" ? "添加成功!" : "编辑成功!",
                type: 'success'
            });

        that.showWenZhang = false;

        that.getRightLists();
                        
                    }
                }
            });
        }
    },
        created(){
            this.getLeftLists(this.activeId);
        this.getQiniuToken();
    }
}
    </script>
    <style scoped lang="sass">
        .img-com-content
        display: flex

        .leftList-box
        width: 200px
        height: 100%
        border: 1px solid #EBEEF5
        position: relative
        overflow-y: auto

        .title
        font-size: 14px
        padding: 8px 17px
        color: #636363
        height: 32px
        line-height: 32px
        font-weight: 600
        position: absolute
        top: 0
        left: 0
        right: 0
        background: #fff
        z-index: 999

        .icon
        float: right
        font-size: 14px
        margin-top: 8px
        font-weight: 600

        .leftLists-content
        height: 100%
        overflow-y: auto
        overflow-x: hidden
        padding-top: 50px
        box-sizing: border-box

        .serverLists
        font-size: 12px
        padding: 8px 17px
        color: #636363
        height: 32px
        line-height: 32px
        cursor: pointer
        position: relative

        .name
        float: left

        .input-name
        width: 90px
        float: left
        padding: 0

        .el-input__inner
        padding: 0 10px

        .option
        float: right

        .serverLists.active
        color: #4c9ff2!important
        background-color: #f5f5f5

        .rightList-box
        overflow-y: auto
        flex-grow: 1
        margin-left: 20px

        .leftLists-content::-webkit-scrollbar
        width: 0 !important

        .leftList-box::-webkit-scrollbar
        width: 0 !important
        height: 0

        .rightList-box::-webkit-scrollbar
        width: 0 !important
        height: 0

        .img-box
        // border: 1px solid #EBEEF5
        width: 100%
        // padding: 20px
        box-sizing: border-box
        display: flex
        flex-wrap: wrap
        height: 600px
        overflow-y: auto

        .img-item.actived
        .img
        border-color: #5874d8

        .img-item
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        position: relative
        width: 85px
        margin-right: 20px
        margin-bottom: 20px
        height: 122px

        .img
        width: 85px
        height: 85px
        border: 1px solid #e7e7eb

        .name
        height: 35px
        line-height: 35px

        .close-icon
        position: absolute
        right: -8px
        top: -8px
        color: var(--dangerColor)
        display: none
        font-size: 20px

        .check-icon
        position: absolute
        top: 63px
        right: 0px
        width: 30px

        .img-item:hover
        .img
        border-color: #5874d8

        .close-icon
        display: block

        .img-item:nth-child(6n)
        margin-right: 0

    </style>
    <style lang="sass">
        .input-name
        width: 90px
        float: left

        .el-input__inner
        padding: 0 10px

        #biaoqian
        .el-form-item__content
        display: flex

        .biaoqian-text
        margin-left: 10px
        color: var(--dangerColor)

    </style>

    <style lang="scss">
        .editor {
            line - height: normal !important;
        height: 500px;
        }
        .ql-snow .ql-tooltip[data-mode=link]::before {
            content: "请输入链接地址:";
        }
        .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
            border - right: 0px;
        content: '保存';
        padding-right: 0px;
        }

        .ql-snow .ql-tooltip[data-mode=video]::before {
            content: "请输入视频地址:";
        }

        .ql-snow .ql-picker.ql-size .ql-picker-label::before,
        .ql-snow .ql-picker.ql-size .ql-picker-item::before {
            content: '14px';
        }
        .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
        .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
            content: '10px';
        }
        .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
        .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
            content: '18px';
        }
        .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
        .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
            content: '32px';
        }

        .ql-snow .ql-picker.ql-header .ql-picker-label::before,
        .ql-snow .ql-picker.ql-header .ql-picker-item::before {
            content: '文本';
        }
        .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
        .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
            content: '标题1';
        }
        .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
        .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
            content: '标题2';
        }
        .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
        .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
            content: '标题3';
        }
        .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
        .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
            content: '标题4';
        }
        .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
        .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
            content: '标题5';
        }
        .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
        .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
            content: '标题6';
        }

        .ql-snow .ql-picker.ql-font .ql-picker-label::before,
        .ql-snow .ql-picker.ql-font .ql-picker-item::before {
            content: '标准字体';
        }
        .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
        .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
            content: '衬线字体';
        }
        .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
        .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
            content: '等宽字体';
        }
    </style> */}
    // qiniu:{
    //     AccessKey:"YCOhGeEvnRa7LcwpiQMYl3LvPpht1BPXPEbW8Usx",
    //     SecretKey:"s0TiVkhmgJWXt2k4FGt6JvzvqVhmWhNINBmtafIx"
    // }
    // https://www.yunnanyunyin.com/qiniu/getToken